<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.3);
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div class="main">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto error expedita fuga neque quaerat quam
            reiciendis similique soluta voluptas. Ab, et libero. Asperiores consectetur, deserunt error eum illum
            officiis reiciendis.
        </div>
        <div>Aliquam aliquid enim facere fuga in ipsum itaque magni minima molestias natus neque, numquam perspiciatis
            quam quis reiciendis repudiandae sapiente sequi similique sint suscipit ut vero voluptate voluptatibus.
            Architecto, cum?
        </div>
        <div>Assumenda consectetur cupiditate debitis dolorem incidunt necessitatibus nihil ratione tempore veniam
            voluptas! Accusamus assumenda consequatur dicta, dignissimos eaque ex, id impedit ipsa maiores minus
            molestiae quaerat qui sed soluta suscipit?
        </div>
        <div>Ab architecto autem commodi corporis cumque cupiditate dicta dignissimos dolorem eaque error fuga fugit hic
            magni maiores minima molestiae nam odit quaerat qui quis veritatis voluptate, voluptatibus? Cupiditate
            fugit, recusandae!
        </div>
        <div>Adipisci nihil porro sed voluptatibus voluptatum? Architecto fugit neque pariatur, praesentium provident
            repellat repudiandae rerum ut. A aspernatur atque consectetur, dolor, dolorem dolorum eos eveniet explicabo
            impedit ipsum similique, tempora.
        </div>
        <div>At eius, enim eum excepturi labore nobis officia quas saepe suscipit tenetur. Architecto ipsa molestiae
            odit tenetur. Ab aliquid aspernatur ipsa itaque pariatur, possimus, provident quaerat quia quidem
            repellendus veritatis!
        </div>
        <div>Adipisci debitis id impedit magni, modi necessitatibus officiis porro unde? A aliquid dignissimos
            doloremque, ea enim eos harum, itaque magnam modi molestias officiis possimus, quos rerum saepe sint ullam
            voluptatem!
        </div>
        <div>A architecto, consequuntur deleniti dicta dolorum ducimus explicabo facilis fugit iste iure iusto maiores
            nam nemo neque, odio provident quas quisquam ratione recusandae rem repellat sed sunt suscipit tempora
            voluptatum?
        </div>
        <div>Cum explicabo id officiis perferendis rem similique soluta tempore, vitae? Asperiores culpa eaque et
            exercitationem facere illum, ipsam modi molestias quibusdam, quis quo ratione saepe tempora unde vel.
            Deserunt, voluptate!
        </div>
        <div>Animi blanditiis cupiditate debitis dolore doloribus enim eum illo iste itaque laboriosam libero maxime
            minima necessitatibus obcaecati, officiis, pariatur quam quidem quos repellat reprehenderit sapiente sunt ut
            veritatis. Ducimus, esse!
        </div>
        <div>Atque eius et, facere recusandae veniam vero voluptatum! Ad adipisci animi beatae commodi, doloremque esse
            fugit, hic illo in ipsa itaque iusto modi neque nisi officia perferendis provident tempore temporibus!
        </div>
        <div>Accusamus alias amet autem dolor dolorem eaque, eius esse est facere facilis hic ipsa modi neque nesciunt
            nisi nulla numquam odit officia officiis reiciendis sapiente sit suscipit unde voluptates voluptatum?
        </div>
        <div>A eligendi fugit id incidunt ipsam placeat ratione. A consectetur dolore earum quod vel! Corporis deserunt
            dicta et ipsa laborum laudantium mollitia nulla sapiente sit soluta! Autem optio quaerat voluptatum?
        </div>
        <div>Ab aut debitis distinctio dolores earum exercitationem expedita fuga, harum molestiae nisi, nulla odit quis
            quod sunt voluptates! Autem deleniti distinctio dolore dolorem laudantium necessitatibus obcaecati quaerat
            qui sint veniam!
        </div>
        <div>Cumque dolor hic, in ipsam iste labore maiores neque nesciunt omnis optio placeat repudiandae tenetur vero!
            Asperiores at aut deleniti dolor, fugit hic in labore laudantium officia vero voluptas voluptatum?
        </div>
        <div>Accusamus, adipisci aperiam architecto assumenda cupiditate ducimus error esse eum, fugit libero maiores
            minima nam natus nemo numquam odio omnis possimus quaerat quam quia quidem quos repellendus saepe vel
            voluptatem!
        </div>
        <div>Commodi enim, facilis id incidunt numquam quod sequi. Aliquam aperiam consequuntur dignissimos distinctio
            eum, fuga in, laborum natus nihil praesentium provident, quod rerum voluptate. Amet dicta ex id quibusdam
            repellendus?
        </div>
        <div>Ab adipisci aperiam architecto aspernatur, atque distinctio ducimus eius ex expedita ipsa iure iusto libero
            modi molestias nemo nisi pariatur quisquam reiciendis rem repellat repudiandae sequi vel vero? Natus,
            quaerat!
        </div>
        <div>Aperiam assumenda eligendi est facere rem veniam vero. A accusantium aliquam consequatur cum, delectus
            dolores, facere ipsa magni necessitatibus nihil nulla pariatur qui rerum saepe sint, ut voluptas
            voluptatibus voluptatum.
        </div>
        <div>Alias assumenda autem blanditiis consequatur doloremque, ea eos exercitationem expedita impedit ipsa modi
            nisi optio, praesentium qui, quos soluta tempore velit voluptas. Distinctio esse est laborum repudiandae!
            Consequuntur, pariatur, perferendis?
        </div>
        <div>Ab, accusamus accusantium ad aspernatur, assumenda atque blanditiis excepturi harum incidunt laborum, modi
            nam officia quasi sit temporibus! Culpa ea error harum id impedit nemo sequi soluta ullam. Praesentium,
            temporibus.
        </div>
        <div>Dolore fuga iusto reiciendis veniam voluptatibus. At autem consequatur dolore dolores maxime pariatur quo
            similique ut! A aliquid aspernatur, cupiditate dolorum ea eos, esse expedita libero, quasi quos similique
            vel.
        </div>
        <div>Ab ad animi aperiam atque consequatur culpa dolor, dolorem doloribus error est, in inventore ipsa iusto
            magnam nam nulla officia omnis, praesentium provident quae qui quo quos sequi veniam veritatis!
        </div>
        <div>Animi aut eaque eum illo nostrum repellat ullam! Ab accusantium, aspernatur aut cum dolores eos est
            expedita incidunt magnam necessitatibus nostrum, numquam qui quo, recusandae reiciendis repellendus sint
            suscipit tempore?
        </div>
        <div>Ad ex iste repudiandae saepe sed. Aspernatur cupiditate dignissimos ducimus error eveniet excepturi
            expedita fugiat, illo incidunt natus nisi pariatur quam sint, sit sunt ut velit. Illum quos similique vero.
        </div>
        <div>Ad commodi consequatur, culpa cumque dolores illum in perspiciatis quasi quia quo rem repellat repellendus
            similique! Asperiores cupiditate, est laborum minima nesciunt nobis placeat porro possimus quos
            reprehenderit soluta voluptatibus!
        </div>
        <div>Aliquam amet animi asperiores at deleniti eaque explicabo nam, porro ratione vel, vitae voluptatem.
            Adipisci aliquid aperiam architecto asperiores corporis harum iure nulla quaerat rem, tempore unde
            voluptate? Suscipit, voluptatibus!
        </div>
        <div>Aliquam animi aperiam blanditiis cum debitis eius, eligendi error et eum eveniet fugiat incidunt laudantium
            magnam magni maxime necessitatibus obcaecati omnis porro, quaerat quasi qui quis reprehenderit sequi sint
            voluptates.
        </div>
        <div>Dignissimos eos pariatur qui quidem sit vero! A consectetur cupiditate dolor eaque esse est et magni
            molestiae, nemo numquam odio pariatur placeat quas quia quidem quisquam reprehenderit ullam veritatis!
            Soluta.
        </div>
        <div>Ab, architecto aut corporis dolor, dolorum ex excepturi id impedit ipsum laborum maxime minima modi
            molestias nisi nulla perspiciatis placeat quod recusandae repellat sit totam unde velit vero voluptate
            voluptatum?
        </div>
        <div>Ad aspernatur assumenda atque autem beatae commodi doloremque doloribus eos fugiat, fugit incidunt ipsum
            iusto necessitatibus nisi placeat possimus praesentium provident quasi quo reiciendis sed tempora tenetur!
            Eos, id vel.
        </div>
        <div>Ad aperiam architecto aspernatur assumenda autem consequuntur eligendi eos fuga fugiat hic illo ipsa ipsam
            iusto laborum maxime officiis optio perspiciatis possimus quaerat quibusdam rem sed, sequi totam velit
            voluptate.
        </div>
        <div>Alias dolorum ea ipsa nemo nobis rem saepe temporibus vero? Accusamus, consectetur consequuntur dignissimos
            dolor dolores ex facere facilis illum itaque mollitia non possimus praesentium quae recusandae suscipit
            ullam ut?
        </div>
        <div>Asperiores, blanditiis eum impedit iusto qui quibusdam recusandae saepe velit voluptas. Asperiores atque
            autem cumque distinctio dolore eaque esse impedit iusto minus neque nobis perspiciatis praesentium saepe,
            sint tempore tenetur?
        </div>
        <div>Accusantium adipisci aliquid architecto consequatur corporis cumque dolorum ea error eum eveniet in labore
            libero, maiores nihil obcaecati officia possimus, quae qui, quibusdam repellat sunt totam voluptatum! Ab,
            beatae, hic.
        </div>
        <div>A ab assumenda dolorem dolorum, error expedita facilis fuga id, inventore libero minus, mollitia nam neque
            optio quos reiciendis rem sit soluta. Amet delectus earum necessitatibus quidem, reprehenderit similique
            vero?
        </div>
        <div>Consectetur culpa dicta facere iure officia quibusdam voluptas. Aperiam aspernatur doloribus eaque fuga,
            fugiat minus tempora! Assumenda aut dolorum ducimus minus nemo officiis provident qui soluta suscipit
            veniam. Iusto, provident.
        </div>
        <div>Asperiores assumenda corporis cum eius eligendi in incidunt minima, modi nobis quisquam, repudiandae
            temporibus unde vero. Aliquam corporis cupiditate expedita maiores maxime nisi, pariatur quaerat quo,
            recusandae soluta, suscipit ut!
        </div>
        <div>Aliquid consectetur error odit officiis, placeat ratione repellat voluptatem. Accusantium dolor dolores
            ipsum molestias nisi perferendis praesentium vel voluptas. Aliquam dolore modi, nemo pariatur quas ratione
            rem totam ut voluptatibus.
        </div>
        <div>Asperiores cupiditate deserunt fugiat illo iusto laborum numquam optio perspiciatis placeat reprehenderit!
            Adipisci amet animi commodi dolores est fugit labore laboriosam modi molestiae nemo neque, quam saepe sequi
            vero vitae.
        </div>
        <div>Ab accusamus adipisci animi consectetur culpa cupiditate distinctio eos, illo impedit in magnam nobis
            officia quia ratione recusandae saepe similique temporibus voluptate! Aperiam at ex laboriosam placeat,
            porro suscipit voluptates.
        </div>
        <div>Dicta dolor dolores est sint. Ad earum laudantium porro. Ducimus fuga nam nisi perferendis, sapiente sed
            temporibus. Aliquid aperiam assumenda corporis deserunt eius itaque, labore, nostrum nulla porro, rem sequi.
        </div>
        <div>Ab consectetur deleniti ex, iure nemo temporibus? A beatae dolorem fugiat harum ipsa minima provident
            rerum, sit ut vel. Ab blanditiis enim hic ipsam laboriosam repellat similique sunt tempore, vitae?
        </div>
        <div>Animi aperiam aspernatur blanditiis culpa cumque debitis delectus deleniti doloribus eligendi, eos eum ex
            excepturi explicabo fugiat iusto maxime molestiae neque nulla odit officia qui quos sint, tempora tempore
            vel!
        </div>
        <div>Accusamus aliquam assumenda harum, hic impedit magni neque rem sequi suscipit voluptatum! Ab deleniti
            minima nemo quae quaerat sapiente similique. Deleniti, eum exercitationem in iusto nisi quis ratione
            recusandae repellat?
        </div>
        <div>Ad aliquam asperiores aspernatur consequuntur cum delectus deserunt dolore dolorem est illo laborum magnam
            pariatur porro qui recusandae saepe soluta, vel veniam voluptatem voluptatum. Aliquid aspernatur at commodi
            cum quos!
        </div>
        <div>Architecto, assumenda autem commodi ducimus eligendi eos excepturi fugiat, hic maiores maxime minus nulla
            optio, perferendis possimus praesentium quae quos repellendus tempore totam voluptatum? Aut dolor ex ipsum
            magnam quis?
        </div>
        <div>A, aspernatur culpa facere hic incidunt maiores odio quidem quo similique sit? A blanditiis deleniti, dolor
            ea ex illo ipsum laudantium molestiae non odio perspiciatis provident quae quis quo, sed!
        </div>
        <div>Accusamus accusantium asperiores assumenda culpa, dolor dolores esse iure magnam perspiciatis, provident,
            quae repellat repellendus sequi soluta sunt tempora voluptate! Adipisci dolor eius ipsa natus saepe sapiente
            soluta vitae voluptates.
        </div>
        <div>Aliquam aut debitis deserunt doloremque dolorum eos facilis hic incidunt ipsa neque perferendis quia
            quisquam, repudiandae rerum tempora temporibus, voluptatem! Alias assumenda error hic odio possimus
            provident qui veritatis voluptas.
        </div>
        <div>Ab adipisci aliquid consectetur, consequatur deleniti dolorem et id nisi officiis quasi quia quod sed
            tempore totam voluptate! Accusamus alias, enim iusto praesentium recusandae rem soluta ut. At, dolor earum!
        </div>
        <div>Ab autem commodi est, maiores minus obcaecati reiciendis voluptatibus! Blanditiis consequuntur, dignissimos
            dolorum, eligendi eos error est eveniet excepturi explicabo iste laboriosam minus non porro repellat totam
            ut velit voluptatibus?
        </div>
        <div>Illum, repellat repudiandae? Corporis eius labore voluptate? Architecto debitis itaque laboriosam
            repudiandae soluta? A accusantium ducimus fugit molestiae totam. Dolorem iste laboriosam libero officia.
            Eius officia provident recusandae. Nobis, totam.
        </div>
        <div>Atque debitis eligendi eum nesciunt nulla recusandae? Amet beatae consequuntur delectus dolore enim, eum
            fuga iusto, laudantium magni nobis omnis, quam ratione repudiandae. Aliquid molestiae molestias nisi quam
            similique veniam.
        </div>
        <div>Autem consectetur dolore est ipsa numquam? Ab animi aperiam asperiores atque beatae consequatur dignissimos
            dolor, eveniet excepturi ipsum laudantium minus, nam nesciunt obcaecati perspiciatis quae quia quibusdam
            quis veritatis voluptate.
        </div>
        <div>At culpa dolore ipsum optio. Ab aliquid consectetur cumque, debitis dolorem eligendi esse ipsum iste magnam
            neque optio qui quibusdam quis quo repudiandae sapiente sequi tempore ut vel, voluptatem voluptatibus!
        </div>
        <div>Consectetur, cupiditate deserunt doloremque id illo ipsa vitae. Fugit reiciendis, sunt! Ad asperiores
            consequuntur corporis dignissimos doloremque eaque iste labore laboriosam maxime neque nulla quae quod saepe
            temporibus, ullam voluptate?
        </div>
        <div>A, consequuntur eaque eligendi exercitationem explicabo illo laboriosam minima molestiae nemo, similique
            sint ut veritatis voluptatem voluptatibus voluptatum! Consequuntur debitis molestiae mollitia nisi rem saepe
            unde. Nihil odio saepe suscipit.
        </div>
        <div>Adipisci dicta, doloribus dolorum ea enim neque optio repellat voluptate. Adipisci aperiam eos facilis
            harum inventore magnam modi quas qui recusandae sapiente soluta veniam, veritatis? Delectus esse nesciunt
            quaerat quos?
        </div>
        <div>Autem consectetur cumque dolorum exercitationem harum ipsum laboriosam nam. Ab aliquam animi aut doloribus
            in laboriosam laudantium maxime necessitatibus nesciunt nobis nulla numquam optio perspiciatis, quae quaerat
            sed totam voluptatibus.
        </div>
    </div>
</body>
</html>